<template>
    <div class="app-container">
        <!--      搜索栏  -->
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
            <el-form-item label="项目名称" prop="projectName">
                <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable size="small"
                        @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="题库名称" prop="questionBankName">
                <el-input v-model="queryParams.questionBankName" placeholder="请输入题库名称" clearable size="small"
                        @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="计划类型" prop="examPlanType">
                <el-select v-model="queryParams.examPlanType" placeholder="计划类型" clearable size="small">
                    <el-option v-for="dict in getExamPlanTypeOptions"
                            :key="dict.code"
                            :label="dict.name"
                            :value="dict.code"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="考试方式" prop="examWay">
                <el-select v-model="queryParams.examWay" placeholder="考试方式" clearable size="small">
                    <el-option v-for="dict in getExamWayOptions"
                            :key="dict.code"
                            :label="dict.name"
                            :value="dict.code"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="考场" prop="examRoomId">
                <el-select v-model="queryParams.examRoomId" placeholder="考场" filterable clearable size="small">
                    <el-option v-for="dict in examRoomList"
                            :key="dict.examRoomId"
                            :label="dict.examRoomName"
                            :value="dict.examRoomId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="planStatus">
                <el-select v-model="queryParams.planStatus" placeholder="状态" clearable size="small">
                    <el-option v-for="dict in getExamPlanStatusOptions"
                            :key="dict.code"
                            :label="dict.name"
                            :value="dict.code"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="创建日期">
                <el-date-picker v-model="dateRange" size="small" style="width: 240px"
                        value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item style="margin-left: 10px;">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" style="margin-left: 10px;" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
<!--  操作      -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini"
                        @click="handleAddPlan"
                >单排</el-button>
                <el-button type="primary" icon="el-icon-plus" size="mini"
                           @click="handleAddMixPlan"
                >混排</el-button>
                <el-button type="primary" icon="el-icon-plus" size="mini"
                           @click="handleAddSkillContestPlan"
                >技能大赛</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
<!--  列表   -->
        <el-table v-loading="loading" :data="examPlanList"
                  @selection-change="handleSelectionChange">
<!--            <el-table-column type="selection" width="55" align="center"/>-->
            <el-table-column label="序号" align="center" type="index"/>
            <el-table-column label="项目名称" align="center" prop="projectName" :show-overflow-tooltip="true" />
            <el-table-column label="题库名称" align="center" prop="questionBankName" :show-overflow-tooltip="true" />
            <el-table-column label="考试日期" align="center" width="100" prop="examDate">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.examDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="考试时间段" align="center" prop="examStart" width="100px" >
                <template slot-scope="scope">
                    <span>{{scope.row.examStart}}~{{scope.row.examEnd}}</span>
                </template>
            </el-table-column>
            <el-table-column label="排考人数" align="center" prop="examNumber" />
            <el-table-column label="计划类型" align="center" prop="examPlanType" :formatter="examPlanTypeFormat"/>
            <el-table-column label="考试方式" align="center" prop="examWay" :formatter="examWayFormat" />
            <el-table-column label="考场" align="center" prop="examRoomId" :formatter="examRoomFormat" :show-overflow-tooltip="true" />
            <el-table-column label="状态" align="center" width="50" prop="planStatus" :formatter="examPlanStatusFormat"/>
            <el-table-column label="操作" align="center" class-name="small-padding" width="320">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view"
                               @click="handleDetail(scope.row)"
                    >详情</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.planStatus === '0' || scope.row.planStatus === '1'"
                               @click="handleExamSetting(scope.row)"
                    >考试设置</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.planStatus === '0' || scope.row.planStatus === '1'"
                            @click="handleEdit(scope.row)"
                    >修改</el-button>
                    <el-button size="mini" v-if="scope.row.planStatus === '0'" type="text" icon="el-icon-edit"
                               @click="handlePostpone(scope.row)"
                    >延期</el-button>
                    <el-button size="mini" v-if="scope.row.planStatus != '2' " type="text" icon="el-icon-edit"
                               @click="handleCancel(scope.row)"
                    >取消</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="pageParams.page"
                    :limit.sync="pageParams.rows" @pagination="getList"
        />
        <!-- 添加或修改考试计划信息 -->
        <el-dialog :title="title" :visible.sync="open" v-if="open" width="58%" :lock-scroll="false" append-to-body>
<!--        单排   -->
            <single-plan-form :form="form" v-if=" '0' === form.examPlanType" :postponeStatus="postponeStatus" :cancelStatus="cancelStatus"
                              :getExamWayOptions="getExamWayOptions" :examRoomList="examRoomList" @submitForm="getList" @cancelDialog="cancel" />

        </el-dialog>
        <!--  考试计划详情信息 -->
        <el-dialog :title="title" :visible.sync="reviewOpen" v-if="reviewOpen" width="58%" :lock-scroll="false" append-to-body>
<!--        单排详情    -->
            <single-plan-review-form :form="form" v-if=" '0' === form.examPlanType" :detailStatus="detailStatus"
                                     :postponeStatus="postponeStatus" :cancelStatus="cancelStatus"
                                     :getExamWayOptions="getExamWayOptions" :examRoomList="examRoomList" @cancelDialog="cancel" />

        </el-dialog>

<!--    考试设置    -->
        <el-dialog :title="title" :visible.sync="examSettingOpen" v-if="examSettingOpen" width="50%" :lock-scroll="false" append-to-body>
            <exam-setting-form :examSettingForm="examSettingForm"  @cancelDialog="cancel" />
        </el-dialog>

    </div>
</template>

<script>
    import {getExamPlanList,getExamPlanById,getExamPlanDetail,addExamPlan,updateExamPlan,deleteExamPlan} from "@/api/exam/examPlan"
    import {getExamSettingByPlanId,deleteExamSetting} from "@/api/exam/examSetting"
    import {getExamRoomList} from "@/api/exam/examRoom"
    import singlePlanForm from "./form/singlePlanForm";
    import singlePlanReviewForm from "./form/singlePlanReviewForm";
    import examSettingForm from  "./form/examSettingForm";
    export default {
        name: "index",
        components: {
            singlePlanForm,
            singlePlanReviewForm,
            examSettingForm
        },
        data() {
            return {
                // 分页参数
                pageParams: {
                    page: 1,
                    rows: 10,
                },
                // 查询参数
                queryParams: {
                    projectName: undefined,
                    questionBankName: undefined,
                    examPlanType: undefined,
                    examWay: undefined,
                    planStatus: undefined,
                    examRoomId: undefined,
                },
                // 日期范围
                dateRange: [],
                // 显示搜索条件
                showSearch: true,
                // 遮罩层
                loading: true,
                // 总条数
                total: 0,
                // 题库表格数据
                examPlanList: [],
                // 考场列表数据
                examRoomList: [],
                // 计划类型数据字典
                getExamPlanTypeOptions: [],
                // 考试方式数据字典
                getExamWayOptions: [],
                // 考试计划状态数据字典
                getExamPlanStatusOptions: [],
                // 选中数组
                ids: [],
                // 弹出层标题
                title: "",
                // 是否弹出考试计划编辑层
                open: false,
                // 是否弹出考试计划详情
                reviewOpen:false,
                // 是否弹出考试设置层
                examSettingOpen:false,
                // 考试计划表单
                form: {},
                // 延期状态
                postponeStatus: false,
                // 取消状态
                cancelStatus: false,
                // 详情查看状态
                detailStatus: false,
                // 考试设置表单
                examSettingForm: {}

            }
        },
        created() {
            //查询 计划类型字典状态
            this.getDicts("exam_plan_type").then(response => {
                this.getExamPlanTypeOptions = response.responseBody.result;
            });
            //查询 考试方式字典状态
            this.getDicts("exam_way").then(response => {
                this.getExamWayOptions = response.responseBody.result;
            });
            //查询 计划状态字典状态
            this.getDicts("plan_status").then(response => {
                this.getExamPlanStatusOptions = response.responseBody.result;
            });
            // 初始化考试计划列表
            this.getList();
        //    初始化考场列表
            this.getRoomList();
        },
        methods: {
            /** 查询考试计划列表 */
            getList() {
                this.loading = true;
                getExamPlanList(
                    {
                        'pageParameter': this.pageParams,
                        'searchParams': this.addDateRange(this.queryParams, this.dateRange)
                    }
                ).then(response => {
                    this.examPlanList = response.responseBody.result;
                    this.total = response.responseBody.pageParameter.totalCount;
                    this.loading = false;
                });
            },

            //查询考场信息
            getRoomList(){
                getExamRoomList({
                    'pageParameter': {"page":1,"rows":1000},
                    'searchParams': {}
                }).then(response => {
                        this.examRoomList = response.responseBody.result;
                    }
                )
            },

            // 计划类型字典翻译
            examPlanTypeFormat(row, column) {
                return this.selectDictLabel(this.getExamPlanTypeOptions, row.examPlanType);
            },
            // 考试方式字典翻译
            examWayFormat(row, column) {
                return this.selectDictLabel(this.getExamWayOptions, row.examWay);
            },
            // 考试计划状态字典翻译
            examPlanStatusFormat(row, column) {
                return this.selectDictLabel(this.getExamPlanStatusOptions, row.planStatus);
            },
            // 考场翻译
            examRoomFormat(row, column) {
                const examRoomId = row.examRoomId;
                // console.log("= 考场Id ==",examRoomId);
                // 考场列表
                const datas = this.examRoomList;
                var actions = [];
                Object.keys(datas).some((key) => {
                    if (datas[key].examRoomId == (examRoomId)) {
                        actions.push(datas[key].examRoomName);
                        return true;
                    }
                })
                return actions.join('');
            },

            /** 搜索按钮操作 */
            handleQuery() {
                this.pageParams.page = 1;
                this.getList();
            },
            // 表单重置
            reset() {
                this.form = {};
                // 允许全部文本框可编辑
                this.detailStatus = false;
                // 不显示延期和取消文本框
                this.postponeStatus = false;
                this.cancelStatus = false;
                this.dateRange = [];
                this.resetForm("form");
            },

            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.reset();
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.planId)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },
            /** 单排新增按钮操作 */
            handleAddPlan() {
                this.reset();
                this.title = "新增排考";
                // 定义计划结构初始化参数 类型(0：单排，1：混排，2：大赛排考)
                this.form = {
                    planId: undefined,
                    examPlanType:'0', // 0 单排标识
                    signUpNumber: 0, // 默认报考人数
                    examWay: '0', // 默认机考
                    examNotice: '请遵守考试秩序！', // 考试须知
                }
                this.open = true;
            },
            /** 混排新增按钮操作 */
            handleAddMixPlan() {
                this.reset();
                this.msgWarning("待开发。。。")
                this.open = false;
            },
            /** 技能大赛新增按钮操作 */
            handleAddSkillContestPlan() {
                this.reset();
                this.msgWarning("待开发。。。")
                this.open = false;
            },

            /** 查看考试计划详情按钮 */
            handleDetail(row) {
                this.reset();
                this.loading = true;
                this.title = "查看详情";
                var planStatus = row.planStatus;
                //0:考试计划详情
                if (planStatus === '0') {
                    const ids = row.planId || this.ids
                    getExamPlanDetail(ids).then(response => {
                        this.form = response.responseBody;
                        if ("0" === this.form.paperType) {
                            delete this.form.paperId;
                        }
                        // 全部文本框禁止编辑
                        this.detailStatus = true;
                        this.loading = false;
                        this.reviewOpen = true;
                    });
                }
                // 1: 延期考试计划详情
                if (planStatus === '1') {
                    const ids = row.planId || this.ids
                    getExamPlanDetail(ids).then(response => {
                        this.form = response.responseBody;
                        // 全部文本框禁止编辑
                        this.detailStatus = true;
                        // 显示延期原因及延期日期
                        this.postponeStatus = true;
                        this.loading = false;
                        this.reviewOpen = true;
                    });
                }
                // 2: 取消考试计划详情
                if (planStatus === '2') {
                    const ids = row.planId || this.ids
                    getExamPlanDetail(ids).then(response => {
                        this.form = response.responseBody;
                        // 全部文本框禁止编辑
                        this.detailStatus = true;
                        // 显示取消原因
                        this.cancelStatus = true;
                        this.loading = false;
                        this.reviewOpen = true;
                    });
                }
            },
            /** 考试设置按钮操作 */
            handleExamSetting(row) {
                getExamSettingByPlanId(row.planId).then(response => {
                    this.examSettingForm = response.responseBody;
                    this.examSettingForm.planId = row.planId;
                    this.examSettingOpen = true;
                    this.title = "考试设置";
                });
            },
            /** 考试计划编辑按钮操作 */
            handleEdit(row) {
                this.reset();
                this.loading = true;
                const ids = row.planId || this.ids
                getExamPlanById(ids).then(response => {
                    this.form = response.responseBody;
                    if ("0" === this.form.paperType) {
                        delete this.form.paperId;
                    }
                    this.loading = false;
                    this.open = true;
                    this.title = "编辑考试计划";
                });
            },
            /** 延期考试计划按钮 */
            handlePostpone(row) {
                this.reset();
                this.loading = true;
                const ids = row.planId || this.ids
                getExamPlanById(ids).then(response => {
                    this.form = response.responseBody;
                    // 清空已有的延期内容
                    this.form.postponeCause = '';
                    this.form.postponeDate = undefined;
                    this.loading = false;
                    // 显示延期原因及延期日期
                    this.postponeStatus = true;
                    this.open = true;
                    this.title = "延期考试计划";
                });
                // this.msgSuccess("延期考试计划！");
            },
            /** 取消考试计划按钮 */
            handleCancel(row) {
                this.reset();
                this.loading = true;
                const ids = row.planId || this.ids
                getExamPlanById(ids).then(response => {
                    this.form = response.responseBody;
                    this.loading = false;
                    // 显示取消考试原因
                    this.cancelStatus = true;
                    this.open = true;
                    this.title = "取消考试计划";
                });
                // this.msgSuccess("取消考试计划！");
            },

            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.planId || this.ids;
                this.$confirm('确认删除该考试计划？', "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.loading = true;
                    deleteExamPlan(ids).then(response => {
                        this.msgSuccess("删除成功");
                        this.getList();
                    })
                }).catch(() => {
                }).finally(() => {
                    this.loading = false;
                });
            },

            // 取消按钮
            cancel() {
                this.reset();
                this.open = false;
                this.reviewOpen = false;
                this.examSettingOpen = false;
            },



        }
    }
</script>

<style scoped>

</style>
